<template>
  <el-dialog
    v-el-drag-dialog
    :title="'调度排班'"
    :visible.sync="visible"
    width="640px"
  >
    <div class="content">
      <div class="row-item">
        <div class="row-label">排班站点:</div>
        <div class="row-value">{{ form.orgName }}</div>
      </div>
      <div class="row-item">
        <div class="row-label">配送员围栏:</div>
        <div class="row-value">{{ form.fenceName }}</div>
      </div>
      <div class="row-item">
        <div class="row-label">排班时间:</div>
        <div class="row-value">{{ form.day }}</div>
      </div>
      <div class="row-item">
        <div class="row-label">配送员:</div>
        <div class="row-value">
          <el-select v-model="form.userIds" multiple collapse-tags placeholder="请选择" style="width: 190px;">
            <el-option
              v-for="item in userOption"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import { fenceSchedulingUpdate, batchUserOrder } from '@/api'
  export default {
    name: 'single',
    props: {
      parentFetchData: {
        type: Function
      }
    },
    data() {
      return {
        visible: false,
        userOption: [],
        form: {
          orgName: '',
          fenceName: '',
          userIds: [],
          day: ''
        }
      }
    },
    created() {
    },
    methods: {
      open(temp) {
        return new Promise(async resolve => {
          this.resolve = resolve
          this.visible = true
          this.form = { ...temp.currentRow, day: temp.currentDay }
          this.$set(this.form, 'userIds', [])
          await this.getUserOrder()
          console.log(temp)
          if (temp.currentUser) {
            const users = temp.currentUser.split(',')
            users.forEach((item, index) => {
              users[index] = parseInt(item)
            })
            users.forEach((item, index) => {
              let has = false
              this.userOption.forEach((item2) => {
                if (item2.userId === item) {
                  has = true
                }
              })
              if (!has) {
                users.splice(index, 1)
              }
            })
            this.$set(this.form, 'userIds', users)
          }
        })
      },
      async getUserOrder() {
        const params = {
          orgSNNo: this.form.orgSNNo || ''
        }
        const res = await batchUserOrder(params)
        this.userOption = res.data
      },
      save() {
        if (this.form.userIds.length === 0) {
          this.$message.warning('请选择配送员')
          return
        }
        const param = {
          fenceId: this.form.fenceId,
          orgId: this.form.orgId,
          userIds: this.form.userIds.join(','),
          schedulingTimeList: [this.form.day]
        }
        fenceSchedulingUpdate(param).then(res => {
          if (res.data) {
            this.$message.success('排班成功')
            this.visible = false
            this.parentFetchData({})
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    display: flex;
    width: 100%;
    padding: 10px 20px;
    flex-wrap: wrap;
    .row-item {
      display: flex;
      width: 50%;
      margin-bottom: 20px;
      .row-label {
        width: 80px;
        height: 30px;
        line-height: 30px;
      }
      .row-value {
        width: 160px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
</style>
